<template>
	<view>
		<view class="auth">
			<view class="wanl-title">欢迎登录账号</view>
			<form @submit="formSubmit">
				<view class="auth-group radius-bock bg-gray wlian-grey-light">
					<input type="text" placeholder="请输入用户名" confirm-type="next" maxlength="16"
						placeholder-class="placeholder" name="account" :value="account"></input>
				</view>
				<view class="auth-group radius-bock bg-gray wlian-grey-light">
					<input type="text" placeholder="请输入登录密码" password="true" confirm-type="done" maxlength="16"
						placeholder-class="placeholder" name="password" @input="onKeyInput"></input>
				</view>
				<view class="auth-button flex flex-direction">
					<button class="cu-btn" :class="'bg-' + themeColor.name" form-type="submit">登 录</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				submitDisabled: true,
				account: '',
				pageroute: ''
			}
		},
		methods: {
			onKeyInput: function(e) {
				this.submitDisabled = false
			},
			formSubmit: async function(e) {
				console.log("eeee", e.detail.value)
				// 判断是否输入值
				if (!e.detail.value.account) {
					uni.showToast({
						title: '请输入用户名',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (!e.detail.value.password) {
					uni.showToast({
						title: '请输入登录密码',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				this.$https({
					url: 'api/user/login',
					method: 'POST',
					data: {
						account: e.detail.value.account,
						password: e.detail.value.password
					},
					success: res => {
						console.log();
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
						if (res.code == 1) {
							uni.setStorageSync('token', res.data.userinfo.token);
							this.$openPage({
								name: 'index'
							})
						}
						console.log("cxzcz", res)
					}
				})

				//
				// this.$https(params).success(res => {
				// 	console.log("xczc",res)
				// })



			},
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}

	.wanl-title {
		padding-bottom: 130rpx;
		padding-top: 170rpx;
		font-size: 68rpx;
	}

	.wanl-title .titleInfo {
		font-size: 56rpx;
	}

	.wanl-weixin-btn-info {
		color: #B8B8B8 !important;
	}


	/* 1.1.5升级 */
	.auth {
		margin: 0 60rpx;
		background-color: #ffffff;
		position: relative;
		z-index: 888;
	}

	.auth-group {
		padding: 1rpx 30rpx;
		display: flex;
		align-items: center;
		min-height: 90rpx;
		justify-content: space-between;
		margin-bottom: 25rpx;
	}

	.auth-group input {
		flex: 1;
		font-size: 33upx;
		color: #250f00;
		padding-right: 20upx;
	}

	.auth-group .placeholder {
		color: #b3b3b3;
	}

	.auth-button {
		padding: 25rpx 0 50rpx 0;
	}

	.auth-button .cu-btn {
		height: 90rpx;
		color: #fff;
	}

	.text-center {
		color: #3f2f21;
	}




	.auth-clause {
		display: flex;
		align-items: center;
		font-size: 25rpx;
		color: #909090;
	}


	.shake-horizontal {
		animation-name: shake-horizontal;
		animation-duration: 100ms;
		animation-iteration-count: infinite;
		animation-timing-function: ease-in-out;
		animation-delay: 0s;
		animation-play-state: running;
	}

	.auth-clause checkbox {
		margin-right: 6rpx;
		transform: scale(0.7);
	}



	.auth-clause text {
		margin: 0 10rpx;
		color: #ED6D0F;
	}
















	.auth-foot {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 777;
		padding: 0 60rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);
	}

	.auth-foot .oauth {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		min-height: 160upx;
		justify-content: space-around;
	}

	.auth-foot .oauth view {
		border: 2rpx solid #FCF7E9;
	}

	.auth-foot .menu {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 100rpx;
		color: #3f2f21;
		line-height: 28rpx;
		font-size: 28rpx;
	}

	.auth-foot text {
		width: 180rpx;
		text-align: center;

	}

	.auth-foot text:nth-child(2) {
		border-left: 1px solid #ececec;
	}

	/* 验证码 */
	.auth-title {
		padding-bottom: 30rpx;
		padding-top: 170rpx;
		font-size: 60rpx;
	}

	.auth-mobile {
		color: #9a9a9a;
		padding-bottom: 80rpx;
	}

	.auth-mobile text {
		margin-left: 10rpx;
	}






	.codes {
		display: flex;
		justify-content: space-around;
		flex-direction: row;

	}

	.codes input {
		background: #ffffff;
		border-bottom: 1px solid #c3c3c3;
		width: 90upx;
		height: 90upx;
		text-align: center;
	}

	.codes .input {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #ffffff;
		border-bottom: 1px solid #c3c3c3;
		width: 90upx;
		height: 90upx;
		font-size: 40upx;
		font-weight: 500;
		color: #333333;
	}

	.codes .input .shining {
		border: 1px solid #ED6D0F;
		height: 50upx;
		animation: shining 1s linear infinite;
		/* 其它浏览器兼容性前缀 */
		-webkit-animation: shining 1s linear infinite;
		-moz-animation: shining 1s linear infinite;
		-ms-animation: shining 1s linear infinite;
		-o-animation: shining 1s linear infinite;
	}

	.codes .active {
		border-bottom: 1px solid #ED6D0F;
		caret-color: #ED6D0F;
	}

	.oneline-codes input {
		text-align: center;
	}

	.auth-again {
		padding-top: 50rpx;
	}

	.auth-again text {
		color: #ED6D0F;
		margin-right: 40rpx;
	}

	.auth-again .time {
		color: #9a9a9a;
	}

	@-webkit-keyframes shining {
		0% {
			opacity: 1;
		}

		50% {
			opacity: 1;
		}

		50.01% {
			opacity: 0;
		}

		100% {
			opacity: 0;
		}
	}

	.wlIcon-QQ {
		color: #12b8f6;
	}

	.wlIcon-WeChat {
		color: #02dc6b;
	}

	.wlIcon-WeiBo {
		color: #d32820;
	}

	.wlIcon-Xiaomi {
		color: #ff6b00;
	}


	@keyframes shake-horizontal {
		0% {
			transform: translate(0px, 0px) rotate(0deg);
		}

		2% {
			transform: translate(-4px, 0px) rotate(0deg);
		}

		4% {
			transform: translate(2px, 0px) rotate(0deg);
		}

		6% {
			transform: translate(-3px, 0px) rotate(0deg);
		}

		8% {
			transform: translate(9px, 0px) rotate(0deg);
		}

		10% {
			transform: translate(2px, 0px) rotate(0deg);
		}

		12% {
			transform: translate(-6px, 0px) rotate(0deg);
		}

		14% {
			transform: translate(-7px, 0px) rotate(0deg);
		}

		16% {
			transform: translate(2px, 0px) rotate(0deg);
		}

		18% {
			transform: translate(7px, 0px) rotate(0deg);
		}

		20% {
			transform: translate(-1px, 0px) rotate(0deg);
		}

		22% {
			transform: translate(-10px, 0px) rotate(0deg);
		}

		24% {
			transform: translate(-10px, 0px) rotate(0deg);
		}

		26% {
			transform: translate(3px, 0px) rotate(0deg);
		}

		28% {
			transform: translate(-5px, 0px) rotate(0deg);
		}

		30% {
			transform: translate(4px, 0px) rotate(0deg);
		}

		32% {
			transform: translate(-6px, 0px) rotate(0deg);
		}

		34% {
			transform: translate(-2px, 0px) rotate(0deg);
		}

		36% {
			transform: translate(-6px, 0px) rotate(0deg);
		}

		38% {
			transform: translate(-2px, 0px) rotate(0deg);
		}

		40% {
			transform: translate(4px, 0px) rotate(0deg);
		}

		42% {
			transform: translate(8px, 0px) rotate(0deg);
		}

		44% {
			transform: translate(-3px, 0px) rotate(0deg);
		}

		46% {
			transform: translate(-10px, 0px) rotate(0deg);
		}

		48% {
			transform: translate(4px, 0px) rotate(0deg);
		}

		50% {
			transform: translate(-6px, 0px) rotate(0deg);
		}

		52% {
			transform: translate(6px, 0px) rotate(0deg);
		}

		54% {
			transform: translate(-8px, 0px) rotate(0deg);
		}

		56% {
			transform: translate(5px, 0px) rotate(0deg);
		}

		58% {
			transform: translate(9px, 0px) rotate(0deg);
		}

		60% {
			transform: translate(7px, 0px) rotate(0deg);
		}

		62% {
			transform: translate(1px, 0px) rotate(0deg);
		}

		64% {
			transform: translate(2px, 0px) rotate(0deg);
		}

		66% {
			transform: translate(-2px, 0px) rotate(0deg);
		}

		68% {
			transform: translate(-7px, 0px) rotate(0deg);
		}

		70% {
			transform: translate(-1px, 0px) rotate(0deg);
		}

		72% {
			transform: translate(-6px, 0px) rotate(0deg);
		}

		74% {
			transform: translate(5px, 0px) rotate(0deg);
		}

		76% {
			transform: translate(0px, 0px) rotate(0deg);
		}

		78% {
			transform: translate(9px, 0px) rotate(0deg);
		}

		80% {
			transform: translate(-3px, 0px) rotate(0deg);
		}

		82% {
			transform: translate(8px, 0px) rotate(0deg);
		}

		84% {
			transform: translate(-2px, 0px) rotate(0deg);
		}

		86% {
			transform: translate(-1px, 0px) rotate(0deg);
		}

		88% {
			transform: translate(-3px, 0px) rotate(0deg);
		}

		90% {
			transform: translate(4px, 0px) rotate(0deg);
		}

		92% {
			transform: translate(0px, 0px) rotate(0deg);
		}

		94% {
			transform: translate(4px, 0px) rotate(0deg);
		}

		96% {
			transform: translate(2px, 0px) rotate(0deg);
		}

		98% {
			transform: translate(-2px, 0px) rotate(0deg);
		}
	}
</style>